<template>
	<div class="yh_content foSi14">
		<div class="btn-group_top mar-bott20">
			<el-button type="primary" class="bac6b7" @click.stop="back" size="small">返回会员卡列表</el-button>
		</div>
		<div class="yh_topsearch">
			<div class="yh_dis topsearch_item">
				<div class="search_left">会籍顾问</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in search.membership" :key="index" class="sons"
						:class="search.membership_index == index ? 'choiceme' : ''">
						{{ item.name }}({{ item.num }})
					</div>
				</div>
			</div>
			<div class="yh_xian" />
			<div class="yh_dis topsearch_item">
				<div class="search_left">渠道来源</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in search.channelsource" :key="index" class="sons"
						:class="search.channelsource_index == index ? 'choiceme' : ''">
						{{ item.name }}({{ item.num }})
					</div>
				</div>
			</div>
		</div>
		<div class="dis disAl pad0 mar-top20" style="border: none;">
			<div>
				<div class="hei20 yh_qs yh_font13">入会时间</div>
				<el-date-picker v-model="search.join_time_start" style="width: 120px" size="small" type="date"
					placeholder="开始时间" />
				<el-date-picker v-model="search.join_time_end" style="width: 120px;margin-left: 5px" size="small"
					type="date" placeholder="截至日期" />
			</div>
			<div style="margin-left: 10px">
				<div class="hei20 yh_qs yh_font13">会员</div>
				<el-input v-model="search.name" size="small" style="width: 140px" placeholder="姓名/手机号" />
			</div>
			<div style="margin-left: 10px">
				<div class="hei20 yh_qs yh_font13">会员类型</div>
				<el-select v-model="search.member_type_id" style="width: 100px" size="small" placeholder="请选择">
					<el-option v-for="item in search.member_type" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</div>
			<div style="margin-left: 10px">
				<el-button type="primary" @click.stop="getSuosoulist" class="mar-top20 bac6b7" size="small">搜索</el-button>
			</div>
		</div>
		<div class="mar-top20 dis disAl mar-bott10">
			<div>当前选中<span style="color: #6b7cdd;margin: 0 3px;">{{multipleSelection.length}}</span>张会员</div>
			<div class="que cuPo mar-left20 coFFF" style="background: #f5934b;padding: 0 10px;"
				@click.stop="shuaClick(1)">
				批量删除会员</div>
			<div class="que cuPo mar-left20 coFFF" style="background: #f5934b;padding: 0 10px;"
				@click.stop="shuaClick(2)">
				批量编辑会籍顾问</div>
			<div class="que cuPo mar-left20 coFFF" style="background: #f5934b;padding: 0 10px;"
				@click.stop="shuaClick(3)">
				批量清除积分</div>
			<div class="que cuPo mar-left20 coFFF" style="background: #f5934b;padding: 0 10px;"
				@click.stop="shuaClick(4)">
				批量发送短信</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%"
				@selection-change="handleSelectionChange">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column type="selection" width="55" />
				<el-table-column prop="realname" label="姓名" />
				<el-table-column prop="tel" label="联系方式" />
				<el-table-column prop="sex" label="性别" />
				<el-table-column prop="consultant" label="会员类型" />
				<el-table-column prop="consultant" label="会籍顾问" />
				<el-table-column prop="channel" label="渠道来源" />
				<el-table-column prop="join_time" label="入会时间" />0
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
		<div v-if="shuaVisible !== 0" class="zhezhao wh100" />
		<div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" :style="shuaVisible === 4?'width: 962px;':'width: 600px;'">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
						<div class="dis disAl">
							<div v-if="shuaVisible === 1" class="foSi20 fowe600 mar-right10">批量删除会员</div>
							<div v-if="shuaVisible === 2" class="foSi20 fowe600 mar-right10">批量变更会籍顾问,本次共选中<span
									style="color: #6b7cdd;">{{multipleSelection.length}}</span>个会员</div>
							<div v-if="shuaVisible === 3" class="foSi20 fowe600 mar-right10">批量清除积分,本次共选中<span
									style="color: #6b7cdd;">{{multipleSelection.length}}</span>个会员</div>
							<div v-if="shuaVisible === 4" class="foSi20 fowe600 mar-right10">批量发送短信</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="shuaVisibleClick()" />
					</div>
					<div class="mar-top10" v-if="shuaVisible === 1">
						<div class="item-l foSi16 mar-bott20" style="padding: 10px 20px;">
							确定删除已选中的{{multipleSelection.length}}位会员？
							删除会员将同步删除相关会员卡数据，删除后数据无法恢复，请谨慎操作</div>
						<el-checkbox v-model="isPopover">我同意并确定删除所选会员</el-checkbox>
						<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top10" style="padding: 20px 0 40px">
							<div v-if="isPopover" @click.stop="delClick('del')" class="mar-right20 que cuPo" style="background: #6b7cdd;">确认</div>
							<div v-if="!isPopover" class="mar-right20 que cuPo" style="background: #616b74;">确认</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
						</div>
					</div>
					<div class="mar-top10" v-if="shuaVisible === 2">
						<div class="item-l item-p1 mar-bott20 mar-top20 dis disAl disJuB">
							<div>会籍顾问变更为</div>
							<el-select v-model="consultant" style="width: 100px" size="small" placeholder="请选择">
								<el-option v-for="item in consultantList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</div>
						<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top10" style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" style="background: #6b7cdd;">确认</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
						</div>
					</div>
					<div class="mar-top10" v-if="shuaVisible === 3">
						<div class="item-l item-p1 mar-bott20 mar-top20 dis disAl disJuB">
							<div>截止日期</div>
							<el-date-picker v-model="time_end" style="width: 120px;" size="small" type="date"
								placeholder="截至日期" />
						</div>
						<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top10" style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" style="background: #6b7cdd;">确认</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
						</div>
					</div>
					<div class="mar-top20" v-if="shuaVisible === 4">
						<div class="dialog-tips2">
							<svg-icon icon-class="tishi" class="mar0 cuPo" style="width: 16px;height: 16px;" />
							<span class="mar-left10">单条短信最大长度为60个字符</span>
						</div>
						<el-input type="textarea" placeholder="请输入内容" v-model="textarea" :rows="4" maxlength="60"
							show-word-limit />
						<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top10" style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" style="background: #6b7cdd;">保存</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getList,
		getConsultant,
		getChannel
	} from '@/api/member'
	export default {
		name: 'ArticleList',
		components: {
			Pagination
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				textarea: '',
				idlist: '',
				time_end: null,
				consultantList: [],
				consultant: '',
				isPopover: false,
				shuaVisible: 0,
				multipleSelection: [],
				list: null,
				total: 0,
				listLoading: false,
				search: {
					name: '',
					membership: [], // 会籍顾问
					membership_index: 0, // 选中了谁的index
					channelsource: [], // 渠道来源
					channelsource_index: 1,
					birthday_start: '', // 生日开始时间
					birthday_end: '', // 生日结束时间
					join_time_start: '', // 入会时间开始
					join_time_end: '', // 入会时间结束
					member_type: [{
							value: '0',
							label: '全部'
						},
						{
							value: '1',
							label: '独立'
						},
						{
							value: '2',
							label: '家庭组'
						}
					], // 会员类型
					member_type_id: '0',
					activities: [{
						value: '0',
						label: '不指定'
					}], // 营销活动
					activities_id: '0'
				},
				tableData: [],
				listQuery: {
					page: 1,
					limit: 0
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '会员批量操作',
				url: '/member/batchMember',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			getConsultant().then(response => {
				const {
					data
				} = response
				var row = [{
					id: 0,
					name: '全部',
					num: data.length
				}]
				this.search.membership = row.concat(data)
			});
			getChannel().then(response => {
				const {
					data
				} = response
				var row = [{
					id: 0,
					name: '全部',
					num: data.length
				}]
				this.search.channelsource = row.concat(data)
				this.getList();
			});
		},
		methods: {
			delClick(type) {
				var params = {
					'idlist': this.idlist,
					'type': type,
					'ext_day': this.ruleForm.youxiao,
					'ext_type': this.ruleForm.yan
				}
				bulkOperation(params).then(response => {
					const {
						data
					} = response
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			back() {
				this.$router.go(-1)
			},
			shuaClick(index) {
				if (this.multipleSelection.length > 0) {
					this.shuaVisible = index
				} else {
					this.$message.error('请先选择要操作的会员');
				}
			},
			shuaVisibleClick() {
				this.shuaVisible = 0
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				var ids = []
				val.forEach((item) => {
					ids.push(item.id)
				})
				this.idlist = ids.join(", ");
			},
			getSuosoulist() {
				this.listQuery.page = 0
				this.getList()
			},
			getList() {
				this.listLoading = true;
				var date = {
					'page': this.listQuery.page,
					'limit': this.listQuery.limit,
					'birthday_start': this.search.birthday_start,
					'birthday_end': this.search.birthday_end,
					'keyword': this.search.name,
					'family_id': this.search.member_type_id,
					'join_time_start': this.search.join_time_start,
					'join_time_end': this.search.join_time_end,
					'activity': this.search.activities_id
				}
				getList(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
			}
		}
	}
</script>
<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		border-bottom-color: #84878d !important;
		border-top-color: #84878d !important;
	}

	.monitor-yt-popover[x-placement^=bottom] .popper__arrow::after {
		top: 0px !important;
	}

	.monitor-yt-popover[x-placement^=top] .popper__arrow::after {
		bottom: 0px !important;
	}
</style>
<style scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.dialog-tips2 {
		height: 32px;
		line-height: 32px;
		margin-top: 0;
		padding: 0 15px;
		margin-bottom: 10px;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	.btn-group_top {
		text-align: right;
	}
</style>
